<template>
  <view class="albums-container">
    <!-- 顶部搜索和过滤区 -->
    <view class="header-section" :class="{'with-edit-bar': isEditMode}">
      <view class="search-bar">
        <u-icon name="search" size="22" color="#3a8838"></u-icon>
        <input type="text" v-model="searchText" placeholder="搜索相册" placeholder-style="color: #999;" />
      </view>
      
      <!-- 优化的筛选器设计 -->
      <view class="filter-panel">
        <view class="sort-options">
          <view 
            class="sort-option" 
            :class="{'active': sortType === 'time'}" 
            @click="toggleSort('time')"
          >
            <text>时间</text>
            <view class="sort-indicator">
              <u-icon 
                :name="sortType === 'time' ? (sortDirection === 'asc' ? 'arrow-upward' : 'arrow-downward') : 'arrow-downward'" 
                size="14" 
                :color="sortType === 'time' ? '#3a8838' : '#ccc'"
              ></u-icon>
            </view>
          </view>
          
          <view 
            class="sort-option" 
            :class="{'active': sortType === 'name'}" 
            @click="toggleSort('name')"
          >
            <text>名称</text>
            <view class="sort-indicator">
              <u-icon 
                :name="sortType === 'name' ? (sortDirection === 'asc' ? 'arrow-upward' : 'arrow-downward') : 'arrow-downward'" 
                size="14" 
                :color="sortType === 'name' ? '#3a8838' : '#ccc'"
              ></u-icon>
            </view>
          </view>
          
          <view 
            class="sort-option" 
            :class="{'active': sortType === 'count'}" 
            @click="toggleSort('count')"
          >
            <text>数量</text>
            <view class="sort-indicator">
              <u-icon 
                :name="sortType === 'count' ? (sortDirection === 'asc' ? 'arrow-upward' : 'arrow-downward') : 'arrow-downward'" 
                size="14" 
                :color="sortType === 'count' ? '#3a8838' : '#ccc'"
              ></u-icon>
            </view>
          </view>
        </view>
        
        <view class="view-switcher">
          <view 
            class="view-button" 
            :class="{'active': viewMode === 'grid'}" 
            @click="viewMode = 'grid'"
          >
            <u-icon name="grid" size="20" :color="viewMode === 'grid' ? '#3a8838' : '#666'"></u-icon>
          </view>
          <view 
            class="view-button" 
            :class="{'active': viewMode === 'list'}" 
            @click="viewMode = 'list'"
          >
            <u-icon name="list" size="20" :color="viewMode === 'list' ? '#3a8838' : '#666'"></u-icon>
          </view>
        </view>
      </view>
      
      <!-- 将编辑模式提示栏移到header-section内部 -->
      <view class="edit-mode-bar" v-if="isEditMode">
        <text class="edit-mode-text">已选择 {{selectedAlbums.length}} 个相册</text>
        <view class="edit-mode-exit" @click="exitEditMode">完成</view>
      </view>
    </view>
    
    <!-- 相册网格视图 -->
    <scroll-view 
      class="album-scroll-view" 
      scroll-y 
      @scrolltolower="loadMore"
      refresher-enabled
      :refresher-triggered="isRefreshing"
      @refresherrefresh="onRefresh"
      :style="{
        height: `calc(100vh - ${headerHeight}px - ${footerHeight}px)`
      }"
    >
      <!-- 加载中状态 -->
      <view class="loading-state" v-if="isInitialLoading">
        <view class="loading-spinner">
          <u-loading-icon mode="circle" size="36" color="#3a8838"></u-loading-icon>
        </view>
        <text class="loading-text">加载相册中...</text>
      </view>
      
      <!-- 空状态 -->
      <view class="empty-state" v-else-if="displayAlbums.length === 0 && !isLoading">
        <u-icon name="photo" size="80" color="#ddd"></u-icon>
        <text class="empty-text">暂无相册</text>
        <text class="empty-subtext">点击底部"新建相册"按钮创建您的第一个相册</text>
      </view>
      
      <!-- 使用网格视图组件 -->
      <album-grid
        v-else-if="viewMode === 'grid'"
        :albums="displayAlbums"
        :isEditMode="isEditMode"
        :selectedAlbums="selectedAlbums"
        @albumClick="handleAlbumClick"
        @albumLongpress="enterEditMode"
        @toggleSelection="toggleAlbumSelection"
      ></album-grid>
      
      <!-- 使用列表视图组件 -->
      <album-list
        v-else-if="viewMode === 'list'"
        :albums="displayAlbums"
        :isEditMode="isEditMode"
        :selectedAlbums="selectedAlbums"
        @albumClick="handleAlbumClick"
        @albumLongpress="enterEditMode"
        @toggleSelection="toggleAlbumSelection"
      ></album-list>
      
      <!-- 加载更多区域 -->
      <view class="loading-more" v-if="isLoading && !isInitialLoading">
        <u-loading-icon mode="circle" size="24" color="#999"></u-loading-icon>
        <text>加载中...</text>
      </view>
      
      <!-- 没有更多数据 -->
      <view class="no-more" v-if="noMoreData && displayAlbums.length > 0">
        <text>— 没有更多相册了 —</text>
      </view>
      
      <!-- 添加底部安全区域，只在滚动到底部时才显示 -->
      <view class="bottom-safe-area"></view>
    </scroll-view>
    
    <!-- 底部操作栏 -->
    <view class="bottom-action-bar" v-if="isEditMode">
      <view class="operation-buttons">
        <view class="op-button fixed-width" @click="selectAll">
          <view class="op-icon" :class="{'selected': isAllSelected}">
            <u-icon name="checkbox-mark" size="24" :color="isAllSelected ? '#fff' : '#666'"></u-icon>
          </view>
          <text>{{ isAllSelected ? '取消' : '全选' }}</text>
        </view>
        
        <view class="op-button fixed-width" @click="batchShare">
          <view class="op-icon">
            <u-icon name="share" size="24" color="#666"></u-icon>
          </view>
          <text>分享</text>
        </view>
        
        <view class="op-button fixed-width" @click="batchMove">
          <view class="op-icon">
            <u-icon name="folder" size="24" color="#666"></u-icon>
          </view>
          <text>移动</text>
        </view>
        
        <view class="op-button fixed-width delete" @click="batchDelete">
          <view class="op-icon">
            <u-icon name="trash" size="24" color="#ff5a5f"></u-icon>
          </view>
          <text>删除</text>
        </view>
      </view>
    </view>
    
    <!-- 非编辑模式下的底部操作栏 -->
    <view class="bottom-action-bar" v-else>
      <view class="main-actions">
        <view class="main-action" @click="createAlbum">
          <view class="action-icon">
            <u-icon name="plus" size="24" color="#3a8838"></u-icon>
          </view>
          <text>新建相册</text>
        </view>
        
        <view class="main-action" @click="() => enterEditMode()">
          <view class="action-icon">
            <u-icon name="more-dot-fill" size="24" color="#666"></u-icon>
          </view>
          <text>多选</text>
        </view>
      </view>
    </view>
    
    <!-- 新建相册弹窗 -->
    <uni-popup ref="albumPopup" type="dialog">
      <uni-popup-dialog
        title="创建相册"
        placeholder="请输入相册名称"
        :before-close="true"
        @confirm="confirmCreateAlbum"
        @close="cancelCreateAlbum"
      ></uni-popup-dialog>
    </uni-popup>
  </view>
</template>

<script>
import AlbumGrid from '@/components/album/AlbumGrid.vue';
import AlbumList from '@/components/album/AlbumList.vue';
import { getMyAlbums } from '@/api/album'
import { getImageBlob } from '@/utils/image.js'

export default {
  components: {
    AlbumGrid,
    AlbumList
  },
  data() {
    return {
      searchText: '',
      sortType: 'time',  // 默认按时间排序
      viewMode: 'grid', // 视图模式：grid, list
      displayAlbums: [], // 当前显示的相册
      page: 1,
      pageSize: 6,
      isLoading: false,
      noMoreData: false,
      isRefreshing: false,
      isEditMode: false,
      selectedAlbums: [],
      newAlbumName: '',
      sortDirection: 'desc',  // 默认降序
      isInitialLoading: false,
      headerHeight: 0,
      footerHeight: 0,
    }
  },
  computed: {
    // 是否全选了当前页的相册
    isAllSelected() {
      return this.displayAlbums.length > 0 && this.selectedAlbums.length === this.displayAlbums.length;
    },
    
    // 过滤后的相册 (仅用于搜索和排序，不用于显示)
    filteredAlbums() {
      let result = [...this.displayAlbums];
      
      // 搜索过滤
      if (this.searchText) {
        result = result.filter(album => album.title.includes(this.searchText));
      }
      
      // 排序
      if (this.sortType === 'time') {
        result.sort((a, b) => {
          const dateA = b.createTime.replace(/-/g, '/');
          const dateB = a.createTime.replace(/-/g, '/');
          return new Date(dateA) - new Date(dateB);
        });
      } else if (this.sortType === 'name') {
        result.sort((a, b) => a.title.localeCompare(b.title));
      } else if (this.sortType === 'count') {
        result.sort((a, b) => b.photoCount - a.photoCount);
      }
      
      return result;
    }
  },
  created() {
    // 初始加载时使用默认排序（时间降序）
    this.loadAlbums();
  },
  methods: {
    // 加载相册数据
    async loadAlbums(isRefresh = false) {
      if (isRefresh) {
        this.page = 1;
        this.noMoreData = false;
      }
      
      if (this.isLoading || (this.noMoreData && !isRefresh)) return;
      
      this.isLoading = true;
      if (this.page === 1) {
        this.isInitialLoading = true;
      }
      
      try {
        const params = {
          current: this.page,
          size: this.pageSize,
          orderBy: this.sortType === 'time' ? 'createTime' : 
                  this.sortType === 'name' ? 'title' : 
                  this.sortType === 'count' ? 'photoCount' : 'createTime',
          desc: this.sortDirection === 'desc'
        };
        console.log('请求参数:', params);
        
        const result = await getMyAlbums(params);
        
        // 处理相册数据
        const albums = result.data?.records || [];
        
        // 处理每个相册的封面
        for (const album of albums) {
          if (album.coverPhoto) {
            try {
              album.coverUrl = await getImageBlob(album.coverPhoto);
            } catch (err) {
              console.error('加载封面失败:', err);
              album.coverUrl = '';
            }
          }
        }
        
        if (isRefresh) {
          this.displayAlbums = albums;
        } else {
          this.displayAlbums = [...this.displayAlbums, ...albums];
        }
        
        // 检查是否还有更多数据
        this.noMoreData = this.displayAlbums.length >= result.data.total;
        
        // 如果有数据，增加页码
        if (albums.length > 0) {
          this.page++;
        }
      } catch (error) {
        console.error('加载相册失败:', error);
        uni.showToast({
          title: '加载相册失败',
          icon: 'none'
        });
      } finally {
        this.isLoading = false;
        this.isInitialLoading = false;
        if (isRefresh) {
          this.isRefreshing = false;
        }
      }
    },
    
    // 计算各区域高度
    calculateHeights() {
      const query = uni.createSelectorQuery().in(this);
      
      // 计算顶部区域高度
      query.select('.header-section').boundingClientRect(data => {
        if (data) {
          this.headerHeight = data.height;
        }
      });
      
      // 计算底部区域高度
      query.select('.bottom-action-bar').boundingClientRect(data => {
        if (data) {
          this.footerHeight = data.height;
        } else {
          this.footerHeight = 0;
        }
      });
      
      // 执行所有查询
      query.exec();
    },
    
    // 下拉刷新
    async onRefresh() {
      this.isRefreshing = true;
      await this.loadAlbums(true);
    },
    
    // 触底加载更多
    loadMore() {
      if (!this.isLoading && !this.noMoreData) {
        this.loadAlbums();
      }
    },
    
    // 切换排序
    toggleSort(type) {
      if (this.sortType === type) {
        // 如果点击当前排序类型，则切换排序方向
        this.sortDirection = this.sortDirection === 'asc' ? 'desc' : 'asc';
      } else {
        // 如果点击不同的排序类型，则设置为该类型并使用默认排序方向
        this.sortType = type;
        this.sortDirection = 'desc';
      }
      
      // 重置页码和数据，重新加载
      this.page = 1;
      this.noMoreData = false;
      this.displayAlbums = [];
      this.loadAlbums();
    },
    
    // 切换视图模式
    toggleViewMode() {
      this.viewMode = this.viewMode === 'grid' ? 'list' : 'grid';
    },
    
    // 处理相册点击
    handleAlbumClick(album) {
      if (this.isEditMode) {
        this.toggleAlbumSelection(album);
      } else {
        uni.navigateTo({
          url: `/pages/album/detail?id=${album.albumId}`
        });
      }
    },
    
    // 创建相册
    createAlbum() {
      uni.navigateTo({
        url: '/pages/album/create'
      });
    },
    
    // 确认创建相册
    confirmCreateAlbum(val) {
      if (val) {
        // 添加新相册
        const newAlbum = {
          id: Date.now(),
          name: val,
          date: new Date().toISOString().split('T')[0],
          cover: '/static/src.png',
          photos: []
        };
        
        this.displayAlbums.unshift(newAlbum);
        
        uni.showToast({
          title: '创建成功',
          icon: 'success'
        });
      }
      this.$refs.albumPopup.close();
    },
    
    // 取消创建相册
    cancelCreateAlbum() {
      this.$refs.albumPopup.close();
    },
    
    // 显示相册操作菜单
    showAlbumActions(album) {
      uni.showActionSheet({
        itemList: ['重命名', '设置封面', '设置权限', '删除相册'],
        success: (res) => {
          switch(res.tapIndex) {
            case 0:
              this.renameAlbum(album);
              break;
            case 1:
              this.setCover(album);
              break;
            case 2:
              this.setPermission(album);
              break;
            case 3:
              this.deleteAlbum(album);
              break;
          }
        }
      });
    },
    
    // 重命名相册
    renameAlbum(album) {
      uni.showModal({
        title: '重命名相册',
        editable: true,
        placeholderText: '请输入新的相册名称',
        content: album.name,
        success: (res) => {
          if (res.confirm && res.content) {
            // 更新相册名称
            const index = this.displayAlbums.findIndex(a => a.id === album.id);
            if (index !== -1) {
              this.displayAlbums[index].name = res.content;
              
              uni.showToast({
                title: '重命名成功',
                icon: 'success'
              });
            }
          }
        }
      });
    },
    
    // 设置封面
    setCover(album) {
      uni.chooseImage({
        count: 1,
        success: (res) => {
          // 更新封面
          uni.showToast({
            title: '设置成功',
            icon: 'success'
          });
        }
      });
    },
    
    // 设置权限
    setPermission(album) {
      uni.showActionSheet({
        itemList: ['公开相册', '私密相册'],
        success: (res) => {
          // 更新权限
          uni.showToast({
            title: '设置成功',
            icon: 'success'
          });
        }
      });
    },
    
    // 删除相册
    deleteAlbum(album) {
      uni.showModal({
        title: '删除相册',
        content: '确定要删除该相册吗？相册内的照片将被一并删除',
        success: (res) => {
          if (res.confirm) {
            // 从显示的相册中删除
            const index = this.displayAlbums.findIndex(a => a.albumId === album.albumId);
            if (index !== -1) {
              this.displayAlbums.splice(index, 1);
            }
            
            // 如果在选中状态，也从选中列表移除
            const selectedIndex = this.selectedAlbums.findIndex(a => a.albumId === album.albumId);
            if (selectedIndex !== -1) {
              this.selectedAlbums.splice(selectedIndex, 1);
            }
            
            uni.showToast({
              title: '删除成功',
              icon: 'success'
            });
          }
        }
      });
    },
    
    // 进入编辑模式并选中相册
    enterEditMode(album) {
      if (!this.isEditMode) {
        this.isEditMode = true;
        // 如果是通过长按相册进入编辑模式，则选中该相册
        // 如果是通过底部"多选"按钮进入，则不选中任何相册
        this.selectedAlbums = album ? [album] : [];
      }
      
      this.$nextTick(() => {
        this.calculateHeights();
      });
    },
    
    // 退出编辑模式
    exitEditMode() {
      this.isEditMode = false;
      this.selectedAlbums = [];
      
      this.$nextTick(() => {
        this.calculateHeights();
      });
    },
    
    // 检查相册是否被选中
    isAlbumSelected(album) {
      return this.selectedAlbums.some(a => a.albumId === album.albumId);
    },
    
    // 切换相册选中状态
    toggleAlbumSelection(album) {
      // 如果不在编辑模式，先进入编辑模式
      if (!this.isEditMode) {
        this.isEditMode = true;
      }
      
      const index = this.selectedAlbums.findIndex(a => a.albumId === album.albumId);
      if (index !== -1) {
        this.selectedAlbums.splice(index, 1);
      } else {
        this.selectedAlbums.push(album);
      }
      
      // 重新计算高度
      this.$nextTick(() => {
        this.calculateHeights();
      });
    },
    
    // 全选/取消全选
    selectAll() {
      if (this.isAllSelected) {
        // 如果全选了，则清空选择
        this.selectedAlbums = [];
      } else {
        // 如果没有全选，则全选当前页
        this.selectedAlbums = [...this.displayAlbums];
      }
    },
    
    // 批量分享
    batchShare() {
      if (this.selectedAlbums.length === 0) {
        uni.showToast({ title: '请先选择相册', icon: 'none' });
        return;
      }
      
      uni.showActionSheet({
        itemList: ['微信好友', '朋友圈', '复制链接', '二维码分享'],
        success: (res) => {
          // 分享操作的模拟
          setTimeout(() => {
            uni.showToast({
              title: '分享成功',
              icon: 'success'
            });
            this.exitEditMode();
          }, 800);
        }
      });
    },
    
    // 批量移动
    batchMove() {
      if (this.selectedAlbums.length === 0) {
        uni.showToast({ title: '请先选择相册', icon: 'none' });
        return;
      }
      
      uni.showActionSheet({
        itemList: ['移动到个人收藏', '移动到家庭相册', '移动到其他分类...'],
        success: (res) => {
          // 移动操作的模拟
          setTimeout(() => {
            uni.showToast({
              title: '移动成功',
              icon: 'success'
            });
            this.exitEditMode();
          }, 800);
        }
      });
    },
    
    // 批量删除
    batchDelete() {
      if (this.selectedAlbums.length === 0) {
        uni.showToast({ title: '请先选择相册', icon: 'none' });
        return;
      }
      
      uni.showModal({
        title: '删除相册',
        content: `确定要删除选中的 ${this.selectedAlbums.length} 个相册吗？`,
        success: (res) => {
          if (res.confirm) {
            // 从显示列表和全部列表中删除选中的相册
            this.selectedAlbums.forEach(album => {
              // 从显示的相册中删除
              const displayIndex = this.displayAlbums.findIndex(a => a.albumId === album.albumId);
              if (displayIndex !== -1) {
                this.displayAlbums.splice(displayIndex, 1);
              }
            });
            
            uni.showToast({
              title: '删除成功',
              icon: 'success'
            });
            
            this.exitEditMode();
          }
        }
      });
    }
  },
  
  mounted() {
    // 确保排序方向有初始值
    this.sortDirection = 'desc';
    
    // 计算各区域高度
    this.$nextTick(() => {
      this.calculateHeights();
    });
  },
  
  beforeDestroy() {
  },
  
  // 监听数据变化，重新计算高度
  watch: {
    isEditMode() {
      this.$nextTick(() => {
        this.calculateHeights();
      });
    }
  }
}
</script>

<style>
.albums-container {
  min-height: 100vh;
  background-color: #f8f8f8;
  position: relative;
}

/* 顶部搜索和过滤区 */
.header-section {
  padding: 20rpx 30rpx;
  background-color: #fff;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
  position: sticky;
  top: 0;
  z-index: 10;
  transition: all 0.3s;
}

/* 当有编辑模式提示栏时，增加header-section的padding-bottom */
.header-section.with-edit-bar {
  padding-bottom: 0;
}

.search-bar {
  display: flex;
  align-items: center;
  background-color: #f5f5f5;
  padding: 15rpx 25rpx;
  border-radius: 30rpx;
  margin-bottom: 20rpx;
}

.search-bar input {
  margin-left: 15rpx;
  font-size: 28rpx;
  width: 100%;
  color: #333;
}

/* 优化的筛选面板 */
.filter-panel {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10rpx 0;
}

.sort-options {
  display: flex;
  align-items: center;
}

.sort-option {
  display: flex;
  align-items: center;
  padding: 10rpx 16rpx;
  border-radius: 8rpx;
  background-color: #f8f8f8;
  margin-right: 15rpx;
  transition: all 0.3s;
}

.sort-option.active {
  background-color: #e8f5e9;
}

.sort-option text {
  font-size: 26rpx;
  color: #333;
  margin-right: 8rpx;
}

/* 排序指示器 */
.sort-indicator {
  display: flex;
  align-items: center;
  margin-left: 4rpx;
}

/* 视图切换器 */
.view-switcher {
  display: flex;
  border: 1px solid #eee;
  border-radius: 8rpx;
  overflow: hidden;
}

.view-button {
  width: 70rpx;
  height: 60rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #f8f8f8;
  transition: all 0.3s;
}

.view-button.active {
  background-color: #e8f5e9;
}

/* 编辑模式提示栏 */
.edit-mode-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx 0;
  background-color: #f0f8f0;
  border-top: 1px solid #e0e0e0;
  margin: 20rpx -30rpx 0;
  padding: 20rpx 30rpx;
}

.edit-mode-text {
  font-size: 28rpx;
  color: #3a8838;
}

.edit-mode-exit {
  font-size: 28rpx;
  color: #3a8838;
  padding: 8rpx 20rpx;
  border: 1px solid #3a8838;
  border-radius: 30rpx;
}

/* 加载中状态样式 */
.loading-state {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 300rpx;
  margin-top: 100rpx;
}

.loading-spinner {
  margin-bottom: 30rpx;
}

.loading-text {
  font-size: 28rpx;
  color: #999;
}

/* 空状态样式 */
.empty-state {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 500rpx;
  padding: 0 60rpx;
}

.empty-text {
  font-size: 32rpx;
  color: #666;
  margin-top: 30rpx;
  margin-bottom: 15rpx;
}

.empty-subtext {
  font-size: 26rpx;
  color: #999;
  text-align: center;
  line-height: 1.5;
}

/* 加载更多和没有更多数据样式优化 */
.loading-more, .no-more {
  text-align: center;
  padding: 30rpx 0;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 0.3s;
}

.loading-more text, .no-more text {
  font-size: 26rpx;
  color: #999;
  margin-left: 10rpx;
}

/* 底部安全区域 */
.bottom-safe-area {
  height: 150rpx; /* 提供足够的底部空间 */
  width: 100%;
}

/* 滚动区域优化 */
.album-scroll-view {
  box-sizing: border-box;
  transition: all 0.3s;
}

/* 底部操作栏 */
.bottom-action-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #fff;
  box-shadow: 0 -2rpx 15rpx rgba(0, 0, 0, 0.1);
  z-index: 100;
  padding: 20rpx 30rpx;
  border-top: 1px solid #f0f0f0;
}

.operation-buttons {
  display: flex;
  justify-content: space-around;
  padding: 10rpx 0;
}

.op-button {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.op-button.fixed-width {
  width: 120rpx;
  text-align: center;
}

.op-button.fixed-width text {
  width: 100%;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.op-icon {
  width: 80rpx;
  height: 80rpx;
  border-radius: 50%;
  background-color: #f5f5f5;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 10rpx;
}

.op-icon.selected {
  background-color: #3a8838;
}

.op-button text {
  font-size: 26rpx;
  color: #666;
}

.op-button.delete .op-icon {
  background-color: #fff0f0;
}

.op-button.delete text {
  color: #ff5a5f;
}

/* 非编辑模式下的底部操作栏 */
.main-actions {
  display: flex;
  justify-content: space-around;
}

.main-action {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.action-icon {
  width: 80rpx;
  height: 80rpx;
  border-radius: 50%;
  background-color: #f5f5f5;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 10rpx;
}

.main-action text {
  font-size: 26rpx;
  color: #666;
}
</style> 